import React, { useState, useEffect } from 'react';
import { Row, Col } from 'antd';
import LineStackChart from 'src/components/Chart/LineStackChart';
import FilterTool from 'src/components/FilterTool';
import '../../../StrategyLabs/Detail/index.less';
import services from 'src/services/api';
import { tooltipFormatter } from '../utils';
import moment from 'moment';

export default function AppNodeonitor(props) {
  const [data, setData] = useState([]); // 应用节点
  const [appList, setAppList] = useState([]); // 应用列表
  useEffect(() => {
    getApplist();
  }, []);
  const filterItems = [
    {
      type: 'Select',
      key: 'app_code',
      name: 'app_code',
      label: '应用',
      defaultValue: (appList.length > 0 && appList[0].code) || '',
      allowClear: true,
      options: appList.map((it) => {
        return {
          value: it.code,
          name: it.name,
        };
      }),
      onChange: () => {},
    },
    {
      type: 'rangepicker',
      key: 'start',
      name: ['start', 'end'],
      label: '统计时间',
      defaultValue: [
        moment()
          .subtract(6, 'day')
          .startOf('day')
          .format('YYYY-MM-DD HH:mm'),
        moment().format('YYYY-MM-DD HH:mm'),
      ],
      disabledDate: (current) => {
        return (
          current &&
          (current > moment().endOf('day') ||
            current <
              moment()
                .subtract(30, 'day')
                .endOf('day'))
        );
      },
      ranges: {
        本周: [moment().startOf('week'), moment()],
        近7天: [moment().subtract('days', 6), moment()],
        本月: [moment().startOf('month'), moment()],
        近30天: [moment().subtract('days', 29), moment()],
      },
      format: 'YYYY-MM-DD HH:mm',
      placeholder: ['起始时间', '结束时间'],
      allowClear: false,
    },
  ];

  function getStatistics(params, type = true) {
    if (!type) return;
    services.devOpt.nodesMonitor(params).then((res) => {
      if (res.code === 0) {
        setData(res.data);
      }
    });
  }

  function getApplist(params) {
    services.devOpt.appList(params).then((res) => {
      if (res.code === 0) {
        setAppList(res.data);
      }
    });
  }
  return (
    <div className='detail-page'>
      {appList.length > 0 && (
        <FilterTool
          data={filterItems}
          colNum={4}
          query={getStatistics}
          refreshFilter={getStatistics}
          isOnChange={true}
          justify='start'
        />
      )}

      <Row style={{ marginTop: '20px' }}>
        <Col span={24} style={{ marginBottom: '20px' }}>
          <div className='risk-trend-box'>
            <div className='chart-head' />
            <div className='chart-box'>
              <LineStackChart
                id='data'
                width='100%'
                height='300px'
                dataSource={data}
                xRender={(it) => moment(it[0] * 1000).format('YYYY-MM-DD HH:mm:ss')}
                dataRender={(it) => (Number.isNaN(Number(it[1])) ? 0 : Number(it[1]))}
                tooltipFormatter={(params) => {
                  return tooltipFormatter(params, 2);
                }}
              />
            </div>
          </div>
        </Col>
      </Row>
    </div>
  );
}
